<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 align="center">聊天室</h1>
<div align="center" style="width: 100%;height: 100%;background-color: beige">
    <div style="border: solid 1px;color: red;height: 50px">
        <div style="display: inline-block;float: left">用户：<span id="username" th:text="${session.user}"></span></div>
        <div align="right" style="display: inline-block;float: right">离线、在线</div>
    </div>
    <div style="border: solid 1px;color: yellow">
        <div style="position: relative;border: solid 1px;color: blue;display:inline-block;float: left;width: 80%;height: 100%">
            <div>
                <textarea
                          style="height: 200px;width: 100%; background-color: deepskyblue">聊天区域</textarea>
            </div>
            <div>
                <textarea id="content" style="height: 100px;width: 100%;background-color: aqua">输入聊天记录</textarea>
                <input type="button" id="sendMsg" value="发送" style="background-color: aqua">
            </div>
        </div>
        <div style="position: relative;border: solid 1px;color: black;display:inline-block;float: right;width: 19%;height: auto;background-color: aliceblue">
            <div>
                <span>好友列表</span>
                <ul id="userList">
                    <li></li>
                </ul>
            </div>
            <div>
                <span>系统广播</span>
                <ul id="systemMsg">
                    <li></li>
                </ul>
            </div>
        </div>
    </div>
</div>
</body>
<script src="webjars/jquery/3.6.4/jquery.min.js">
</script>
<script>
    //和websocket建立联系
    $(document).ready(function () {
        var webSocket = new WebSocket("ws://localhost:8080/chat");
        let receiver = '';
        var username=$('#username').text()

        webSocket.onopen = () => {
            console.log("websocket连接成功websocket连接成功")
        }
        webSocket.onmessage = (event) => {
            console.log("收到消息：" + event.data);
            let message = JSON.parse(event.data);
            for (let i = 0; i < message.receiver.length; i++) {
                if ($("#username").text() !== message.receiver[i]) {
                    $("#userList").html("<li>" + message.receiver[i] + "</li>")
                }
                $("#systemMsg").append("<li>" + message.receiver[i] + "上线了</li>")
                let appendedElements = [];

                $("#systemMsg").append("<li>" + message.receiver[i] + "上线了</li>");

                // 移除已经添加过的元素也就是去重
                const liElements = $("#systemMsg").find("li");
                liElements.each((index, element) => {
                    if (appendedElements.includes(element.textContent)) {
                        element.remove();
                    } else {
                        appendedElements.push(element.textContent);
                    }
                });

            }

        }
        webSocket.onclose = () => {
            console.log("websocket连接关闭")
        }
        webSocket.onerror = (exception) => {
            console.log(exception)
        }
        //获取收消息的人
        $("#userList").click(function () {
            receiver = $("#userList").text();
        })

        //发送消息
        $("#sendMsg").click(function () {
            let content = $("#content").val();
            var message={"isSystem":"false","receiver":receiver,"sender":username,"content":content};
            webSocket.send(JSON.stringify(message))
        })
    })
</script>
</html>